<template>
  <h1> Vite + Vue3 + TS </h1>
  <h2>count:{{ count }}</h2>
  <button @click="count++"> count 递增 </button>
  <h2>money:{{ money }}</h2>
  <button @click="money += 10"> money 递增 </button>
  <h3>用户信息：{{ user }}</h3>
  <button @click="user.name = '李四'"> 用户改名 </button>
  <button @click="user.age++"> 用户年龄增加 </button>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const count = ref(100);
const money = ref(0);

// * 监听一个 ref 响应式数据 - 如果 count 发生变化则自动执行回调函数
watch(count, (newVal, oldVal) => {
  console.log('newVal', newVal);
  console.log('oldVal', oldVal);
});

// * 监听多个 ref 响应式数据 - 只要有一个发生变变化就会执行回调函数
watch([count, money], (newVal, oldVal) => {
  console.log('监听多个ref - newVal', newVal);
});

const user = ref({
  name: '张三',
  age: 18,
});

// * 监听 ref 复杂数据(对象) - 对象的任意属性发生变化就会触发回调函数
// 因为对象的内存地址是同一个，所以 newVal === oldVal === 对象本身
watch(
  user,
  val => {
    console.log('user', val);
  },
  {
    deep: true, // 深度监听
    immediate: true, // 初始化监听（立即监听）
  },
);

// * 监听对象的某个属性 - 简写
watch(
  () => user.value.age,
  val => {
    console.log('监听对象的某个属性 - 简写 age', val);
  },
);

// * 监听对象的某个属性 - 完整写法
watch(
  () => {
    return user.value.age;
  },
  (newVal, oldVal) => {
    console.log('监听对象的某个属性 - 完整写法 age', newVal, oldVal);
  },
  {},
);
</script>
